<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<style type="text/css">
#map_canvas {
	width:500px;
	height:500px;                                                                                                                                    
} 
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
$(function(){
	var lat="${requestScope.cinemaMap.cinemaVO.lat}";
	var lng="${requestScope.cinemaMap.cinemaVO.lng}";
	var map;
	var marker;
	function initialize() {
		var latlng = new google.maps.LatLng(lat, lng);     
		var myOptions = {       
			zoom: 15,       
			center: latlng,       
			mapTypeId: google.maps.MapTypeId.ROADMAP     
		};     
		map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
		map.setTilt(45);
		marker = new google.maps.Marker({
			position: latlng,
			animation:google.maps.Animation.BOUNCE
		});
		marker.setMap(map);
	}
	$("span").click(function(){
		$.ajax({
			type:"post",
			url:"${initParam.root }movie/cinemaContent.do",
			data:"cinemaNo="+$(this).attr('id'), // no 검색으로 변경
			dataType:"json",
			success:function(jsonData){
				lat=jsonData.lat;
				lng=jsonData.lng;
				initialize();
			}
		});
	});
	initialize();	
});
</script>
<h3>독립 영화관</h3>
<hr align="left" width="150">
<center>
<table class="cinema">
	<tbody>
		<tr>
			<td id="map_canvas"></td>
			<td valign="top">
				<table class="cinemaList">
				<tbody>
					<c:forEach var="cinemaVO" items="${requestScope.cinemaMap.cinemaList}">
						<tr>
							<td>
								<span id="${cinemaVO.cinemaNo }" >${cinemaVO.name }</span>
							</td>
						</tr>
					</c:forEach>
				</tbody>			
				</table>				
			</td>
		</tr>
	</tbody>
</table>
</center>